<template>
    <div class="main">
      <p  class="main_text">分配拖车公司</p>

        <!-- ############################################## 表单 ############################################## -->
        <div class="cyr-flex">
            <el-table :data="tableData"  :header-cell-style="{ 'background': '#f0f6fe' }"
               :show-overflow-tooltip="true" v-adaptive border>
                <el-table-column label="车辆牌照" prop="carInfo.value.号牌号码" />
                <el-table-column label="预约单编号" prop="orderSn" />
                <el-table-column label="拖运费用(元)" prop="driverIncome" />
                <el-table-column label="预约时间" prop="appointments" />
                <el-table-column label="报废人姓名" prop="personName" />
                <el-table-column label="报废人电话" prop="phone" />
                <el-table-column label="车辆位置" prop="detailCarAddress" />
                <el-table-column label="网点地址" prop="detailDotAddress" />
                <el-table-column label="操作" fixed="right">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="rushOrderDialog(props.row)"
                            v-if="roleList.write">分配</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
                @change="handleCurrentChange" />
        </div>
    </div>

    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 分配拖车 ****************************** -->
    <el-dialog v-model="centerDialogVisible" title="分配拖车" width="30%" align-center>
        <template #header>
            <div class="df aic">
                <el-icon style="color: #fff;" size="20">
                    <Edit />
                </el-icon>&nbsp;
                <p style="color: #fff;">分配公司</p>
            </div>
        </template>
        <el-select v-model="value" placeholder="请选择拖车公司" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="checkRushOrder">
                    分配
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { formatTimeAll } from '../../../filters/index'
import { RequestDispatchCompanyGet, RequestDispatchCompanyRobOrder, RequestGetTrailerList, RequestAllocation } from "@/api/path/index.js";
import { ref } from 'vue';
import { CollectionTag, Edit } from '@element-plus/icons-vue'
import useAuthorize from "@/hooks/authorize";
//拖车公司列表

const value = ref('')
const orderSn = ref('')
const options = ref<{ value: string, label: string }[]>([])
let roleList = useAuthorize()

const centerDialogVisible = ref<any>(false)

const tableData = ref<any>([])

const total = ref<any>(0)
const currentPage = ref<any>(1)
const pageSize = ref<any>(10)
const handleSizeChange = (val: number) => {
    getData()
}
const handleCurrentChange = (val: number) => {
    getData()
}
const getData = () => {

    RequestDispatchCompanyGet({
        page: currentPage.value,
        rows: pageSize.value,
        orderStatus: "等待接单"
    }).then((res: any) => {
        if (res.resultObj == null) {
            tableData.value = []
        } else {
            res.resultObj.data.forEach((item: any) => {
                item.appointments = formatTimeAll(item.appointments)
                item.carInfo.value = JSON.parse(item.carInfo.value)
            });
            total.value = res.resultObj.total
            tableData.value = res.resultObj.data
        }
    })
}
getData()
const rushOrderDialog = (item: any) => {
    centerDialogVisible.value = true
    value.value = ''
    orderSn.value = item.orderSn
    RequestGetTrailerList({
        "page": 1,
        "rows": 99,
        "type": 1
    }).then(({ resultObj }) => {
        options.value = []
        resultObj.data.forEach((item: any) => {
            options.value.push({
                value: item.node,
                label: item.companyName
            })
        })
    })
}
/*--------------------------- 分配拖车公司 ---------------------------*/
const checkRushOrder = (item) => {
    if (value.value == '') {
        return ElMessage.warning('请选择拖车公司');
    } else {
        RequestAllocation(orderSn.value, value.value).then((res: any) => {
            ElMessage.success(res.msg);
            centerDialogVisible.value = false;
            getData();
        })
    }
}
</script>

<style scoped lang="scss">
.main {
    width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }

    .el-form {
        .el-icon svg {
            color: #dcdfe6;
        }

    }
}
</style>
